<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_固定定位遮罩层</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,0.3);
            /* 固定定位以html视口(view port)为参照物,紧贴四个边,实现撑满全屏的效果 */
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci at atque corporis dolor error
            exercitationem fugiat in ipsum molestiae nisi non, perferendis placeat quia quo quos sunt tempore temporibus
            totam.
        </div>
        <div>Aut cum et nisi nobis non nostrum perspiciatis, quos ratione repellendus tenetur? Blanditiis eos illum
            laudantium porro quaerat quas sed? Accusantium animi cupiditate dolor dolorum fugit ipsam necessitatibus
            repudiandae rerum!
        </div>
        <div>Earum eligendi id optio voluptate. Commodi cum hic qui sint suscipit unde voluptas! Animi architecto
            consequuntur distinctio dolore doloribus est illo laboriosam, magni minima nam nesciunt obcaecati unde
            veniam, voluptas.
        </div>
        <div>Eligendi quod sequi voluptatum. Aperiam atque dolorum eos illum iste maiores nemo nihil nisi, pariatur
            perferendis, provident quam quis, repellendus sed vel? Dicta ipsam nemo perferendis quisquam quo vero
            voluptas.
        </div>
        <div>Alias aliquid cum cumque delectus dicta dolorem, doloribus ducimus eligendi est eveniet excepturi
            exercitationem id maiores molestiae natus necessitatibus neque nesciunt nobis optio pariatur quam
            reprehenderit sit tenetur voluptate voluptatibus.
        </div>
        <div>Ab alias aliquam aut delectus doloremque dolorum earum eius, error est, iusto magnam mollitia nemo numquam
            possimus quas quis, recusandae rem voluptatibus! At exercitationem minima sit. Ipsam iste laudantium magnam?
        </div>
        <div>Dignissimos eos eum ipsa ipsum nemo provident sed? A atque beatae commodi delectus error et fuga harum, id
            impedit in, ipsum itaque magni modi odio quia sint unde voluptatem voluptates!
        </div>
        <div>Ab cupiditate delectus, dolore, earum eos magnam nihil quaerat qui quod quos recusandae repellat ullam.
            Asperiores, blanditiis deserunt est facere, incidunt iste labore nam pariatur quis quisquam tenetur, totam!
            Tenetur!
        </div>
        <div>Ad aliquid architecto corporis culpa debitis dicta dignissimos dolor ea expedita harum illo ipsum iste iure
            iusto labore molestiae molestias officia possimus praesentium, quaerat quidem quisquam sit tempore vero
            voluptates?
        </div>
        <div>Animi aspernatur cupiditate deserunt impedit placeat sapiente. Amet cumque molestiae sequi temporibus.
            Adipisci alias asperiores beatae commodi deserunt ex expedita impedit ipsum, placeat quia quisquam quos
            repellat sequi vitae voluptate.
        </div>
        <div>Ad atque cumque delectus esse illo impedit inventore iste iusto magni, maiores nemo nostrum, officiis optio
            quam quis reiciendis ullam vitae voluptatibus. Aliquid amet magnam odio, perferendis quam quo temporibus!
        </div>
        <div>Accusantium consequatur dolor hic laboriosam laudantium omnis quae quo rerum ullam velit? A accusantium
            beatae et ipsa libero molestiae optio pariatur praesentium quia quidem. Accusamus corporis facere natus
            numquam odio.
        </div>
        <div>Ad amet commodi culpa debitis dolores error esse eveniet, facilis fugit harum in ipsa ipsum magnam
            molestias mollitia odit praesentium quae quam quisquam quos repellendus repudiandae sunt totam velit
            voluptatum!
        </div>
        <div>At aut dolor voluptas. Amet beatae commodi consequatur corporis deleniti dicta doloribus excepturi
            laboriosam magni nam nobis, obcaecati perspiciatis quia repellendus reprehenderit sapiente sed ullam velit
            veniam, vitae voluptate voluptates.
        </div>
        <div>A atque consequuntur dolorem ea eos error fuga fugit impedit ipsam itaque iusto laudantium magni maiores
            minima molestias, odio, officiis, placeat possimus provident quas qui reprehenderit veniam vero. Ea, rerum?
        </div>
        <div>Animi deleniti dolorum excepturi exercitationem facere iusto laboriosam modi nisi officia, praesentium,
            quam temporibus tenetur. Distinctio doloribus explicabo fugiat, laborum, magnam minus necessitatibus
            nesciunt nobis nostrum odio qui ut. Tenetur?
        </div>
        <div>Accusamus aliquam asperiores, dolor dolore id itaque laboriosam minus mollitia repellat sequi tenetur unde
            velit! Blanditiis delectus dolorem doloremque enim fugiat, impedit laboriosam molestias odio, odit, officia
            perferendis veniam voluptates.
        </div>
        <div>Adipisci corporis delectus ex minus officia. Adipisci aliquid atque consequuntur doloremque ea, eius fugit
            illum ipsa ipsum natus numquam odit possimus recusandae sed, sequi soluta, tempore ullam ut vitae
            voluptatum?
        </div>
        <div>Aliquid amet asperiores deserunt exercitationem molestiae natus odit quae soluta suscipit! Adipisci
            consequuntur, est excepturi facere magni modi neque sit! Aperiam autem culpa debitis in laborum praesentium,
            quibusdam repudiandae veritatis.
        </div>
        <div>Asperiores aspernatur magni suscipit. Amet assumenda consequuntur eaque eligendi expedita ipsum laudantium
            natus non nostrum odit provident quia quisquam quod reiciendis rem, rerum tempora voluptatem! Aspernatur at
            quia recusandae voluptas?
        </div>
        <div>Aliquid atque consequatur cumque cupiditate dignissimos explicabo iure laboriosam nostrum nulla officiis,
            perferendis quam, qui repellendus repudiandae rerum, sed soluta sunt ullam vel veritatis? Commodi ipsa
            quidem reiciendis soluta voluptas!
        </div>
        <div>Ab alias atque aut consequatur dicta, earum est, eveniet fugiat illum ipsam iure necessitatibus officia
            reiciendis repellendus sunt suscipit vero? Dignissimos earum facilis laudantium neque officiis, totam. Nisi
            praesentium, quidem.
        </div>
        <div>Accusantium ad animi, esse exercitationem fugiat illo iste nulla, optio quam quisquam ratione sapiente sint
            tempora unde veritatis! Animi error facilis incidunt. At doloribus ducimus libero nam nesciunt possimus
            quaerat!
        </div>
        <div>Alias deleniti fugit non nulla quidem ratione rem voluptatum? Ad adipisci alias libero omnis optio
            praesentium reprehenderit! Aliquam aliquid blanditiis consectetur harum impedit ipsa maxime nam,
            necessitatibus nulla omnis velit.
        </div>
        <div>Dolor laudantium neque quae reiciendis similique! Doloremque doloribus nam praesentium repellendus suscipit
            temporibus voluptate. Accusantium dicta dolores esse eveniet illum laborum maiores officia porro, possimus
            quidem reiciendis sint soluta vero.
        </div>
        <div>Accusamus aut cum deserunt eaque enim excepturi, exercitationem ipsam laborum minima odit quos, saepe vel
            voluptate? At enim id iusto ut. Ad dolorem error iste libero perspiciatis praesentium recusandae ullam!
        </div>
        <div>Ad architecto consequuntur cumque cupiditate delectus deserunt esse est eveniet, facilis fugiat magnam
            numquam pariatur perspiciatis, tempore, voluptas? Commodi dolor doloribus facilis id molestias
            necessitatibus nesciunt porro reprehenderit tempore totam?
        </div>
        <div>Accusantium alias at autem corporis culpa, distinctio dolore enim esse, exercitationem magnam minima natus
            nesciunt nihil nisi non possimus qui quod reiciendis sapiente sit soluta tempora velit? Beatae eveniet,
            magni!
        </div>
        <div>Aliquam architecto atque autem consequatur cupiditate enim eos error ex hic impedit in ipsa itaque, magnam
            molestias nam necessitatibus pariatur reiciendis rem repellendus reprehenderit sint suscipit tempora
            voluptate voluptatibus voluptatum!
        </div>
        <div>Ab accusamus ad adipisci delectus dolorem illo ipsum iste iusto placeat porro quia quis, quos sapiente,
            unde velit veritatis voluptates. Hic magnam minus nemo saepe voluptatem? Dicta sunt ut vero!
        </div>
        <div>Accusantium alias dolorem ipsa, quas tempora voluptatibus. Accusantium dignissimos fuga laudantium modi
            sequi sint? Amet, at deleniti inventore nam non placeat repellat veritatis? Accusamus commodi delectus
            ducimus eum itaque quia.
        </div>
        <div>Consequatur deleniti eaque et ipsa maxime provident quas quis quos sed sint? Accusamus aspernatur at
            corporis culpa dolor dolore, eius esse incidunt itaque nam natus, neque omnis provident qui voluptates!
        </div>
        <div>Aliquid atque beatae consequuntur culpa dolores ea enim esse eum, facilis, fugiat ipsam itaque modi nisi
            nobis nulla numquam obcaecati praesentium quidem quo quod rem, repellat repudiandae sint sit vel!
        </div>
        <div>Accusamus accusantium architecto asperiores, atque beatae commodi consectetur ea enim et eum explicabo ipsa
            itaque molestias nulla numquam officia omnis quos repellendus, sed sint soluta tempora tempore totam ut
            voluptatibus.
        </div>
        <div>Aliquid culpa doloremque harum illo incidunt ipsum laboriosam maxime, minus nostrum nulla optio possimus
            quasi reiciendis sequi temporibus vitae voluptatem! Atque doloremque esse libero, molestias nostrum officia
            reprehenderit totam vel.
        </div>
        <div>Ab amet aperiam assumenda culpa hic illum in libero magni, minima necessitatibus neque non placeat repellat
            repellendus saepe tenetur voluptate. Aliquid consectetur consequatur fugiat in optio quia ratione sed
            soluta?
        </div>
        <div>Cumque dolore illo impedit itaque laboriosam maiores nesciunt numquam quia totam vero! Architecto,
            asperiores blanditiis eos ex explicabo itaque labore nesciunt nihil obcaecati odio porro provident quis quod
            saepe totam.
        </div>
        <div>Culpa delectus eum, minus molestias nemo, nihil nobis odit officiis, perferendis quas reiciendis voluptate.
            Accusantium alias aperiam atque, doloribus ducimus eaque esse ipsa itaque, labore pariatur quaerat ratione
            sunt ullam.
        </div>
        <div>Adipisci amet aspernatur, culpa cumque dolore earum enim eveniet ex excepturi harum minus, nihil obcaecati
            perferendis quasi quos recusandae rem repudiandae sequi suscipit veniam vitae voluptates, voluptatibus.
            Alias, hic temporibus!
        </div>
        <div>At doloribus fuga qui repellat! Blanditiis consectetur consequuntur cum cupiditate doloribus eius eligendi
            ipsum molestias totam velit. Accusantium ad consectetur, eius eveniet fugiat, minus nulla placeat ratione
            similique soluta suscipit.
        </div>
        <div>A asperiores assumenda aut corporis doloremque dolores eaque eius eveniet facere fugit, id iste itaque iure
            nihil perspiciatis, placeat provident quaerat quidem reiciendis reprehenderit sed veritatis vitae voluptate
            voluptates, voluptatum!
        </div>
        <div>A, blanditiis culpa eaque nesciunt nostrum obcaecati porro veritatis. Dignissimos hic nihil quod ratione,
            repellendus tempore. Beatae dolorum eos voluptates. Ad aperiam cumque laboriosam laborum quod reprehenderit
            sint voluptatem, voluptatum.
        </div>
        <div>Aspernatur cupiditate, dolorum eaque numquam rem repellendus voluptatum? Accusantium at cum dolores,
            expedita, facere fugit ipsam modi mollitia nobis, nulla officia perferendis perspiciatis ratione repudiandae
            sunt velit veritatis voluptate voluptatum?
        </div>
        <div>Beatae consequuntur doloribus error in ipsam tempore, temporibus voluptate! Cum explicabo laudantium magnam
            reiciendis velit. Architecto aspernatur consequatur, cumque dolor dolore dolorum excepturi modi odio
            quibusdam, saepe sapiente tempora vel?
        </div>
        <div>Alias aliquam amet asperiores consectetur, deleniti distinctio doloremque eveniet ipsa labore laudantium
            minus perspiciatis possimus quibusdam quo, quod ratione, rem repellendus rerum sequi tempora tenetur ut
            veritatis voluptatibus? Ipsa, laboriosam?
        </div>
        <div>Ad architecto aut dicta dignissimos dolore doloremque dolorum facere ipsa necessitatibus officia optio quam
            saepe tempore, ut voluptates. Aliquam aperiam delectus dolorum eligendi libero modi neque, numquam sapiente
            sit unde!
        </div>
        <div>A ad, deserunt dicta distinctio doloremque ea eveniet harum inventore iusto laudantium magnam maxime nisi
            provident rerum, sapiente sequi tempora. Blanditiis doloribus, excepturi illo itaque quae sunt tempore vero
            voluptatem.
        </div>
        <div>Alias assumenda atque commodi consectetur corporis culpa delectus deleniti dolorem et expedita facere illum
            libero nam nihil odit, perferendis porro possimus quis quod repellat repellendus sequi suscipit veniam
            voluptas voluptate?
        </div>
        <div>Assumenda cupiditate, id impedit mollitia numquam quasi rerum soluta? Adipisci atque commodi dolores enim
            hic impedit laudantium magnam maxime modi nobis, quae quas quasi quibusdam quo recusandae ut voluptatem
            voluptatibus?
        </div>
        <div>Accusantium atque dolor dolores enim, eveniet excepturi exercitationem fuga harum iste iusto minus, nemo
            neque numquam officia pariatur perspiciatis porro praesentium quaerat quasi qui quis, quos reprehenderit
            repudiandae vel voluptatem.
        </div>
        <div>Animi aspernatur ipsum labore quaerat quisquam rerum voluptas? Consectetur nam neque veniam! Dolorum est
            eum voluptatibus voluptatum? Aspernatur autem exercitationem labore, libero mollitia pariatur perspiciatis
            repellendus soluta unde vitae voluptatem.
        </div>
        <div>Atque eaque enim eos expedita harum inventore iure laborum magni modi, molestiae nesciunt officia sequi
            veniam vitae voluptatem. Nisi recusandae repellendus sapiente! Cum eum facere id maiores, minima quo quos.
        </div>
        <div>Aperiam atque deleniti dicta dolor fugit ipsum iusto laboriosam minima necessitatibus nesciunt optio
            placeat quas, sapiente sunt unde velit veritatis voluptate. Ad animi cum iusto labore nihil, quam vel
            voluptatem!
        </div>
        <div>Error eum itaque magnam modi rem? A ad alias aliquam architecto aspernatur consequatur debitis dicta ex
            expedita fuga fugit itaque nihil officiis, omnis perspiciatis provident quis recusandae totam, voluptate
            voluptatem!
        </div>
        <div>A aperiam architecto cum debitis dignissimos dolore dolorem enim excepturi exercitationem id, ipsam labore
            laudantium magnam minima molestias mollitia nulla officia quasi qui quidem quod recusandae repellat tempore
            unde voluptates.
        </div>
        <div>Accusamus aliquam aperiam assumenda deleniti doloribus eum fugiat iure, laboriosam magnam maxime, nam nemo
            obcaecati odit officia optio quidem quis sapiente sint veniam voluptatem! A corporis dolorum facilis
            laboriosam reprehenderit?
        </div>
        <div>Architecto at beatae consectetur consequatur dignissimos exercitationem, fugit illum labore, laboriosam
            magni minus molestias mollitia nisi nulla officiis perferendis qui quia quos repellat sint sunt tempora
            totam unde voluptate voluptatem!
        </div>
        <div>Dolorum ea eos error illum placeat quibusdam reiciendis voluptate voluptates. Assumenda consectetur
            deleniti deserunt dignissimos ea, eveniet facere necessitatibus neque non, optio saepe vel voluptates.
            Distinctio ducimus error neque ratione!
        </div>
        <div>Ab atque autem dolorem est laboriosam natus nesciunt nostrum nulla, quas quia quo, saepe sit temporibus.
            Amet, deleniti doloremque dolores eum expedita iusto modi nisi, perferendis quis repudiandae sapiente
            veritatis.
        </div>
        <div>Accusamus, cupiditate esse fugiat odit omnis suscipit totam vel! Adipisci architecto asperiores assumenda
            beatae debitis dicta dolores eaque eligendi fuga magnam minima, natus nobis nulla porro quos recusandae
            ullam voluptatum?
        </div>
    </div>
</body>
</html>